<template>
    <s-theme>
        <s-header backText="登录" />
        <div class="col" style="padding: 150rpx 70rpx 70rpx 70rpx">
            <div style="font-size: 60rpx; color: #303133; font-weight: bold">登录</div>
            <div class="row" style="font-size: 30rpx; margin-top: 20rpx">
                <div style="color: #909399">还没有账号，</div>
                <div style="color: #e1251b" @click="toRegister">立即注册</div>
            </div>

            <div style="margin-top: 100rpx">
                <!-- 表单 -->
                <input placeholder="请输入账号" style="margin-bottom: 15rpx" />
                <s-line />
                <input password placeholder="请输入密码" style="margin-top: 60rpx; margin-bottom: 15rpx" />
                <s-line />
                <div class="row no-wrap" style="margin-top: 60rpx; margin-bottom: 15rpx">
                    <input class="col" password placeholder="请输入验证码" />
                    <div style="width: 150rpx; height: 40rpx; background-color: #909399"></div>
                </div>
                <s-line />

                <!-- 登录 -->

                <div class="row flex-center" style="width: 100%; margin-top: 100rpx">
                    <div class="flex flex-center logout-btn" @click="toLogin">登录</div>
                    <div class="flex flex-center logout-fast-btn" @click="toLogin" style="margin-top: 20rpx">
                        一键授权登录
                    </div>
                </div>
            </div>
        </div>
    </s-theme>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import CUser from '~/store/CUser'
import System from '~/utils/System'
import Timer from '~/utils/Timer'

const conf = reactive({
    logout: {
        show: false
    }
})

const toRegister = () => {
    System.redirectTo('/login/register')
}

const toLogin = () => {
    CUser.setInfo({
        id: 1,
        avatarUrl:
            'https://thirdwx.qlogo.cn/mmopen/vi_32/tIVibas8kFuIjMuPkXlSKzkFyxQD1hXRr6lwGrJD3ZQ3w6r2ibWzeZeShsKkkSibWR83CApqyib4fiaSoSic9VzeZAHw/132',
        nickName: '#{title}'
    })
    System.sr('登录成功')
    Timer.once(() => {
        uni.navigateBack()
    }, 300)
}
</script>
<style lang="less" scoped>
.logout-btn {
    width: 100%;
    height: 80rpx;
    background-color: #ff4544;
    border-radius: 40rpx;
    color: #fff;
    font-size: 30rpx;
}
.logout-fast-btn {
    width: 100%;
    height: 80rpx;
    color: #ff4544;
    border: 1rpx solid #ff4544;
    border-radius: 40rpx;
    font-size: 30rpx;
}
</style>
